<script lang="ts" setup>
    import {reactive, ref,type Component,computed} from "vue";
    import { productDetails } from '@/components/shop/productDetails'; // 导入商品数据
</script>

<template>
    <div class="main">
        <!-- <div class="tab">
        <RouterLink to="/shop" class="rl">首页</RouterLink>
        <RouterLink :to="{path:`/list`}" class="rl">购物车列表</RouterLink>
        <RouterLink to="/user" class="rl">用户信息</RouterLink> -->
        <el-menu 
      :default-active="'/shop'" 
      class="el-menu-vertical-demo"
      router
      style="min-width: 200px; border-right: 0;"
    >
      <!-- 首页菜单 -->
      <el-menu-item index="/shop">
        <template #title>
          <i class="el-icon-house" style="margin-right: 8px;"></i>
          <span>首页</span>
        </template>
      </el-menu-item>

      <!-- 购物车列表（父菜单，包含商品子菜单） -->
      <el-sub-menu index="list">
        <template #title>
          <i class="el-icon-shopping-cart-2" style="margin-right: 8px;"></i>
          <span>购物车列表</span>
        </template>
        
        <!-- 动态生成商品子菜单 -->
        <template v-for="product in productDetails" :key="product.id">
          <el-menu-item :index="`/list/details/${product.id}`">
            <template #title>
              <i class="el-icon-gift" style="margin-right: 8px; font-size: 12px;"></i>
              <span>{{ product.name }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-sub-menu>

      <!-- 用户信息菜单 -->
      <el-menu-item index="/user">
        <template #title>
          <i class="el-icon-user" style="margin-right: 8px;"></i>
          <span>用户信息</span>
        </template>
      </el-menu-item>
    </el-menu>

    </div>
        <div class="compt">
            <RouterView></RouterView>
        </div>
</template>
  
<style scoped>
    .main{
        width: 800px;
        margin: auto;
    }
    .tab{
        display: flex;
        flex-direction: column;
        border: 1px solid black;
        width: 150px;
        height: 300px;
        text-align: center;
        float: left;
    }
    .rl{
        margin-top: 20px;
        margin-right: 20px;
        margin-bottom: 60px;
    }
    .compt{
        border: 1px solid black;
        width: 700px;
        height: 300px;
        text-align: center;
        margin: auto;
    }
    .tabButton{
        width: 100px;
        height: 40px;
    }
</style>